<template>
    <el-dialog :visible.sync="visible" :before-close="closeDialog">
        <el-card class="msg-list">
            <el-row v-for="(item,index) of msgList" :key="index">
                <!--发送时间、发送用户-->
                <el-row>
                    <el-col :span="12">
                        {{item.sendTime}}
                    </el-col>
                    <el-col :span="12" class="msg-full-sender-nickname">
                        {{item.senderNickname}}
                    </el-col>
                </el-row>
                <!--头像、消息内容-->
                <el-row>
                    <el-col :span="2" >
                        <div class="msg-avatar">
                            {{item.senderNickname?item.senderNickname.substring(0,2):''}}
                        </div>
                    </el-col>
                    <el-col :span="22">
                        <el-input type="textarea" :value="item.content"/>
                    </el-col>
                </el-row>
                <!--附件-->
                <el-row v-if="item.fileId != null">
                    <el-col :span="22" :offset="2">
                        <file-download :file-id="item.fileId" :file-name="item.filename"/>
                    </el-col>
                </el-row>
                <!--子消息-->
                <el-row v-if="item.children != null && item.children.length > 0"
                        v-for="(childMsg,index) of item.children" :key="index">
                    <!--发送时间、发送用户-->
                    <el-row>
                        <el-col :span="12" :offset="2">
                            {{childMsg.sendTime}}
                        </el-col>
                        <el-col :span="10" class="msg-full-sender-nickname">
                            {{childMsg.senderNickname}}
                        </el-col>
                    </el-row>
                    <!--头像、消息内容-->
                    <el-row>
                        <el-col :span="2" :offset="2">
                            <div class="msg-avatar">
                                {{childMsg.senderNickname?childMsg.senderNickname.substring(0,2):''}}
                            </div>
                        </el-col>
                        <el-col :span="20">
                            <el-input type="textarea"  :value="childMsg.content"/>
                        </el-col>
                    </el-row>
                    <!--附件-->
                    <el-row v-if="childMsg.fileId != null">
                        <el-col :span="22" :offset="2">
                            <file-download :file-id="childMsg.fileId" :file-name="childMsg.filename"/>
                        </el-col>
                    </el-row>
                </el-row>
            </el-row>
        </el-card>
        <el-card>
            <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page="msgPage.currentPage"
                    :page-size="msgPage.pageSize"
                    :total="msgPage.total"
                    :page-sizes="msgPage.pageSizes"
                    layout="total, sizes, prev, pager, next, jumper"
                    v-if="msgList.length > 0">
            </el-pagination>
        </el-card>
        <div v-if="msgList.length <= 0" class="null-msg" style="text-align: center;font-size: 18px;margin-top: 28px;">
            暂无数据
        </div>
        <div class="consult-button">
            <!--<el-button type="warning" size="small" @click.stop="endDis()">结束会商</el-button>-->
        </div>
    </el-dialog>
</template>
<script>
    import {projectEndDiscussion} from "@/api/planning/project";
    import {messagePage} from '@/api/planning/message'
    import { mapGetters } from "vuex";
    import fileDownload from "@/components/file/download";

    export default {
        name: "endDiscussion",
        components: {
            fileDownload
        },
        data() {
            return {
                msgPage: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 5, // 每页显示多少条,
                    pageSizes: [5, 10, 20, 30, 40, 50, 100]
                },
                msgList:[]
            };
        },
        props:{
            visible:{
                type: Boolean,
                required: true
            },
            //A:规划登记  B:清单   参考后台枚举类：com/bostech/pums/planning/api/entity/enums/PlanningTopicTypeEnum.java
            type:{
                type: String,
                required: true
            },
            taskId:{
                type: String,
                required: true
            },
            businessId:{
                type: [String, Number],
                required: true
            },
            topicId:{
                type: [String, Number],
            },
            deptName: {
                type: String
            }
        },
        created(){
            this.registerinfoId = this.businessId;
        },
        computed: mapGetters([
            "userInfo"
        ]),
        watch: {
            visible() {
                if(this.visible){
                    this.getMessageList();
                }
            }
        },
        methods: {
            getMessageList(){
                let params = {
                    current: this.msgPage.currentPage,
                    size: this.msgPage.pageSize,
                    topicId: this.topicId,
                    ascs: 'send_time'
                };
                messagePage(params).then(res => {
                    if (res.data.code == 0) {
                        this.msgList = res.data.data.records;
                        this.msgPage.total = res.data.data.total;
                    }
                })
            },
            endDis(){
                this.$confirm("确定结束会商?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    projectEndDiscussion({taskId:this.taskId}).then(response => {
                        if (response.data.code == 0) {
                            this.$notify({
                                title: "成功",
                                message: "结束会商成功",
                                type: "success",
                                duration: 2000
                            });
                            this.closeDialog();
                        }
                    });
                });
            },
            sizeChange(pageSize){
                this.msgPage.pageSize = pageSize;
                this.getMessageList();
            },
            currentChange(currentPage){
                this.msgPage.currentPage = currentPage;
                this.getMessageList();
            },
            closeDialog(done){
                this.$emit('update:visible', false);
            },
        }
    };
</script>
<style lang="scss" scoped>

    .msg-list{
        .msg-full-sender-nickname{
            text-align: right;
        }

        .msg-avatar {
            border-radius: 20px;
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #2d8cf0;
            color: #fff;
        }
    }


</style>
